<template>
  <div class="addEmp">
    <el-card>
      <div slot="header" class="header">添加员工</div>
      <el-form
        label-width="80px"
        :model="employee"
        :rules="rules"
        ref="empForm"
      >
        <el-form-item label="姓名" prop="name">
          <el-input placeholder="姓名" v-model="employee.name"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input placeholder="账号" v-model="employee.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            placeholder="密码"
            v-model="employee.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input placeholder="电话" v-model="employee.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="employee.sex" label="男">男</el-radio>
          <el-radio v-model="employee.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select placeholder="角色" v-model="employee.role">
            <el-option label="普通员工" value="employee"></el-option>
            <el-option label="收银员" value="sales"></el-option>
            <el-option label="管理员" value="admin"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select placeholder="状态" v-model="employee.status">
            <el-option label="激活" value="active"></el-option>
            <el-option label="禁用" value="inactive"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="addEmpData">提交</el-button>
        <el-button type="info" @click="resetForm">重置</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addEmp } from "@/api/user";
export default {
  data() {
    return {
      employee: {
        name: "",
        account: "",
        password: "",
        phone: "",
        sex: "",
        role: "",
        status: "",
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        role: [{ required: true, message: "请选择器角色", trigger: "blur" }],
        status: [{ required: true, message: "请选择器状态", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 提交添加的员工数据
    addEmpData() {
      // 需要对表单进行验证，通过之后，发送ajax，
      this.$refs.empForm.validate((data) => {
        if (data) {
          // 发送ajax
          addEmp(this.employee).then((resp) => {
            let respData = resp.data;
            console.log(respData);
            if (respData.code == 20000) {
              this.$router.push("/emp/EmployeeList");
            }
          });
        }
      });
    },
    // 重置表单数据
    resetForm() {
      this.$refs.empForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.addEmp {
  width: 100%;
  height: 100%;
  .el-form {
    width: 400px;
  }
}
</style>
